<template>
    <div>
        <!-- <el-image style="width: 100px; height: 100px" :src="imgUrl" /> -->
        <ElImageViewer v-if="imgUrl.length > 0" :url-list="[imgUrl]" @close="closePictureViewer" />
        <div ref="memorandumDocRef" id="memorandumDocDivId" class="doc-pop-div" @click="handleDocEvent"></div>
    </div>
</template>
  
<script setup>
import axios from "axios";
import { renderAsync } from 'docx-preview';

const imgUrl = ref('')

const props = defineProps({
    fileUrl: {
        type: String,
        default: ""
    },
});

watch(() => props.fileUrl, value => loadFile(value))

//加载
const loadFile = (url) => {
    console.log('加载的文件 = ', url)
    if (!url) {
        return
    }
    axios({
        method: "get",
        responseType: "blob",
        url: url,
    }).then(({ data }) => {
        //渲染
        renderAsync(data, document.getElementById('memorandumDocDivId'))
    });
}

loadFile()

const closePictureViewer = () => {
    imgUrl.value = ''
}

//处理文档上的点击事件
const handleDocEvent = (e) => {
    console.log(e.target)
    if (!e || e.target) return
    let domName = e.target.localName || ''
    switch (domName) {
        case 'img':
            imgUrl.value = e.target.src || ''
            break;

        case 'video':
            //http://localhost/static/20231211_143851.mp4
            break;
    }
}
</script>
  

<style lang="scss">
.docx-wrapper {
    background: transparent !important;
    padding: 10px !important;

    .docx {
        width: 100% !important;
        // box-shadow: none !important;
        padding: 10px !important;
    }
}

.el-dialog__body {
    padding: 0;
}
</style>

<style scoped>
.doc-pop-div {
    height: 66vh;
    overflow-y: auto;
}

.dialog-footer {
    margin-top: 20px;
}
</style>